<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS_animation_水平轮播</title>
		<link rel="stylesheet" href="css/index.css" type="text/css">
		<script src="js/index.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- div>ul.list>(li.item>img[src="img/pic-$.jpg"])*4 -->
		<div>
			<ul class="list">
				<li class="item"><img src="img/pic-1.jpg" alt=""></li>
				<li class="item"><img src="img/pic-2.jpg" alt=""></li>
				<li class="item"><img src="img/pic-3.jpg" alt=""></li>
				<li class="item"><img src="img/pic-4.jpg" alt=""></li>
			</ul>
			<button class="prev">prev</button>
			<button class="next">next</button>
			<!-- ul.list1>(li.item1)*4 -->
			 <ul class="list1">
			 	<li class="item1 focus">1</li>
			 	<li class="item1">2</li>
			 	<li class="item1">3</li>
			 	<li class="item1">4</li>
			 </ul>
		</div>
	</body>
</html>
